<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
    <!-- 顶部导航栏 -->
    <div class="bg-white/80 backdrop-blur-sm border-b border-gray-200/50 sticky top-0 z-40">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">
          <!-- 返回按钮 -->
          <button 
            @click="goBack"
            class="flex items-center space-x-2 text-gray-600 hover:text-gray-800 transition-colors duration-200"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            <span class="font-medium">返回题目列表</span>
          </button>
          
          <!-- 页面标题 -->
          <h1 class="text-xl font-semibold text-gray-800">提交记录详情</h1>
          
          <!-- 占位符 -->
          <div class="w-24"></div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 加载状态 -->
      <div v-if="loading" class="flex items-center justify-center py-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
        <span class="ml-3 text-gray-600">加载中...</span>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="text-center py-12">
        <div class="text-red-500 text-lg font-medium mb-2">{{ error }}</div>
        <button 
          @click="loadSubmissionDetail"
          class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
        >
          重试
        </button>
      </div>

      <!-- 提交详情内容 -->
      <div v-else-if="submission" class="space-y-6">
        <!-- 基本信息卡片 -->
        <div class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="text-sm text-gray-500 mb-1">状态</div>
              <div :class="getStatusClass(submission.status)" class="px-3 py-1 text-sm font-semibold rounded-lg inline-block">
                {{ getStatusName(submission.status) }}
              </div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="text-sm text-gray-500 mb-1">得分</div>
              <div class="text-xl font-semibold text-gray-800">{{ submission.score || 0 }}分</div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="text-sm text-gray-500 mb-1">执行时间</div>
              <div class="text-xl font-semibold text-gray-800">{{ submission.execution_time || submission.time_used || 0 }}ms</div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="text-sm text-gray-500 mb-1">内存使用</div>
              <div class="text-xl font-semibold text-gray-800">{{ submission.memory_used || 0 }}KB</div>
            </div>
          </div>
        </div>

        <!-- 测试用例信息 -->
        <div v-if="submission.test_cases || submission.passed_cases" class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">测试用例</h2>
          <div class="bg-gray-50 p-4 rounded-lg">
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-4">
                <div class="text-sm">
                  <span class="text-green-600 font-semibold text-lg">{{ submission.passed_cases || 0 }}</span>
                  <span class="text-gray-500">/ {{ submission.test_cases || 0 }} 通过</span>
                </div>
                <div class="text-sm text-gray-500">
                  通过率: {{ submission.test_cases ? Math.round((submission.passed_cases || 0) / submission.test_cases * 100) : 0 }}%
                </div>
              </div>
              <!-- 进度条 -->
              <div class="w-32 bg-gray-200 rounded-full h-2">
                <div 
                  class="bg-green-500 h-2 rounded-full transition-all duration-300"
                  :style="{ width: submission.test_cases ? `${(submission.passed_cases || 0) / submission.test_cases * 100}%` : '0%' }"
                ></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 语言和提交时间 -->
        <div class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">其他信息</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="text-sm text-gray-500 mb-1">编程语言</div>
              <div class="text-lg font-semibold text-gray-800">{{ getLanguageName(submission.language) }}</div>
            </div>
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="text-sm text-gray-500 mb-1">提交时间</div>
              <div class="text-lg font-semibold text-gray-800">{{ formatTime(submission.created_at || submission.submitted_at) }}</div>
            </div>
          </div>
        </div>

        <!-- 错误信息 -->
        <div v-if="submission.error_message" class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">错误信息</h2>
          <div class="bg-red-50 border border-red-200 p-4 rounded-lg">
            <div class="text-sm text-red-700 font-mono bg-red-100 p-3 rounded border whitespace-pre-wrap">
              {{ submission.error_message }}
            </div>
          </div>
        </div>

        <!-- 提交代码 -->
        <div class="bg-white/90 backdrop-blur-sm rounded-xl border border-gray-200/50 shadow-sm p-6">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">提交代码</h2>
          <div class="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
            <pre class="text-sm font-mono whitespace-pre-wrap">{{ submission.code }}</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { submissionApi } from '@/api/submission';

const route = useRoute();
const router = useRouter();

// 响应式数据
const submission = ref(null);
const loading = ref(true);
const error = ref('');

// 获取提交记录ID
const submissionId = computed(() => route.params.id);

// 加载提交详情
const loadSubmissionDetail = async () => {
  try {
    loading.value = true;
    error.value = '';
    
    const response = await submissionApi.getSubmissionDetail(submissionId.value);
    submission.value = response.data;
  } catch (err) {
    console.error('获取提交详情失败:', err);
    error.value = err.response?.data?.message || '获取提交详情失败';
  } finally {
    loading.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case 'accepted':
      return 'bg-green-100 text-green-800';
    case 'wrong_answer':
      return 'bg-red-100 text-red-800';
    case 'time_limit_exceeded':
      return 'bg-yellow-100 text-yellow-800';
    case 'memory_limit_exceeded':
      return 'bg-orange-100 text-orange-800';
    case 'runtime_error':
      return 'bg-purple-100 text-purple-800';
    case 'compile_error':
      return 'bg-gray-100 text-gray-800';
    case 'pending':
    case 'judging':
      return 'bg-blue-100 text-blue-800';
    default:
      return 'bg-gray-100 text-gray-800';
  }
};

// 获取状态名称
const getStatusName = (status) => {
  switch (status) {
    case 'accepted':
      return '通过';
    case 'wrong_answer':
      return '答案错误';
    case 'time_limit_exceeded':
      return '超时';
    case 'memory_limit_exceeded':
      return '内存超限';
    case 'runtime_error':
      return '运行时错误';
    case 'compile_error':
      return '编译错误';
    case 'pending':
      return '等待中';
    case 'judging':
      return '评测中';
    default:
      return '未知';
  }
};

// 获取语言名称
const getLanguageName = (language) => {
  switch (language) {
    case 'python':
      return 'Python';
    case 'java':
      return 'Java';
    case 'cpp':
      return 'C++';
    case 'c':
      return 'C';
    case 'javascript':
      return 'JavaScript';
    case 'go':
      return 'Go';
    case 'rust':
      return 'Rust';
    default:
      return language;
  }
};

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '未知时间';
  
  const date = new Date(timeStr);
  const now = new Date();
  const diff = now - date;
  
  if (diff < 60000) { // 1分钟内
    return '刚刚';
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`;
  } else if (diff < 86400000) { // 1天内
    return `${Math.floor(diff / 3600000)}小时前`;
  } else if (diff < 604800000) { // 1周内
    return `${Math.floor(diff / 86400000)}天前`;
  } else {
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }
};

// 页面加载时获取数据
onMounted(() => {
  loadSubmissionDetail();
});
</script>

<style scoped>
/* 自定义样式 */
</style>
